<template>
	<scroll-view @scrolltolower="scrolltolower" refresher-enabled='true' @refresherrefresh="scrollrefre"
		:refresher-triggered="triggered" scroll-y="true" style="height:80vh">
		<view class="box">
			<view class="waterfall-box" v-for="item in list" @click="toDetail(item.id)" :key="item.id">
				<view class="info">{{ item.details }}</view>
				<view class="desc dis-flex flex-x-between">
					<view class="dis-flex flex-x-between flex-y-center">
						<image src="/static/imgs/tou.png" style="width:34rpx;" mode="widthFix" />
						<view class="txts">{{ item.username }}</view>
						<!-- <view class="tags">永久</view> -->
						<view class="tags">誓言</view>
					</view>
					<view class="dis-flex flex-x-between flex-y-center">
						<image src="/static/imgs/notice.png" style="width:32rpx;" mode="widthFix" />
						<view class="txts">{{ formattedLikeNum(item.comment_num) }}</view>
						<image v-if="item.is_like == 1" src="/static/imgs/xin1.png"
							style="width:32rpx;margin-left:24rpx;" mode="widthFix" />
						<image v-else src="/static/imgs/xin.png" style="width:32rpx;margin-left:24rpx;"
							mode="widthFix" />
						<view class="txts">{{ formattedLikeNum(item.like_num) }}</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
		</view>
	</scroll-view>
</template>

<script>
import {
	interest,
	hallInfo
} from '../../api/hall.js'
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			list: [],
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多~',
				contentrefresh: '加载中',
				contentnomore: '我是有底线的~'
			},
			// 当前页数
			currentPage: 1,
			// 每页数据数量
			pageSize: 6,
			triggered: true
		}
	},
	// 触底触发
	onReachBottom() {
		console.log("触底")
		if (this.status != 'noMore') {
			this.status = 'loading';
			this.getList()
		} else {
			console.log('123')
			this.status = "noMore"
		}
	},
	created(){
		this.getList()
	},
	// mounted() {
	// 	console.log('列表开始')
	// 	this.getList()
	// },
	methods: {
		scrollrefre() {
			this.triggered = true
			console.log('下拉');
			setTimeout(() => {
				this.list = [];
				this.currentPage = 1;
				this.getList();
				this.triggered = false
				console.log('结束下拉');
			}, 800);

		},
		refreshData() {
			this.getList()
		},
		scrolltolower() {
			console.log("触底")
			this.getList()
		},
		async getList() {
			let search = this.$store.state.searchData;
			const res = await hallInfo({
				'page': this.currentPage,
				'type': 2,
				'show': 0,
				'search': search
			}).then(res => {
				console.log(res, '获取誓言类内容');
				this.list = this.list.concat(res.data.data);
				console.log(res.data.data.length, '长度');
				if (res.data.data.length > 0) {
					console.log('还有下一页');
					this.status = 'loading';
					this.currentPage++;
				} else {
					this.status = 'nomore';
				}
				this.$store.commit('clearSearchData');//清空
			});
		},
		formattedLikeNum(likeNum) {
			if (likeNum >= 10000 && likeNum < 1000000) {
				// 大于等于1万小于100万，显示 x.x 万
				return (likeNum / 10000).toFixed(1) + 'w';
			} else {
				// 其他情况直接显示数字
				return likeNum.toString();
			}
		},
		toDetail(id) {
			uni.navigateTo({
				url: '/pages/hall/hallDetails?id=' + id,
			});
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.box {
	padding: 20rpx 10rpx;

	.waterfall-box {
		background: #FFF;
		border-radius: 24rpx;
		border: 1px solid rgba(0, 0, 0, 0.13);
		margin-bottom: 20rpx;

		.info {
			padding: 42rpx 32rpx;
			font-size: 26rpx;
			color: $uni-text-color;
			line-height: 40rpx;
			border-bottom: 1px solid rgba(0, 0, 0, 0.13);
		}

		.desc {
			padding: 24rpx 32rpx;

			.txts {
				font-size: 26rpx;
				color: $uni-text-color-primary;
				margin-left: 10rpx;
			}

			.tags {
				font-size: 20rpx;
				color: $uni-text-color-placeholder;
				margin-left: 10rpx;
				border-radius: 10rpx;
				border: 1px solid #DDDDDD;
				padding: 2rpx 6rpx;
			}
		}
	}
}
</style>